import Vue from 'vue'
import Component from 'vue-class-component'

import ProductIcon from './assets/images/productIcon.png'
import SelectProductIcon from './assets/images/selectProductIcon.png'

import MessageIcon from './assets/images/messageIcon.png'
import SelectMessageIcon from './assets/images/messageSelectIcon.png'

import SettingIcon from './assets/images/settingIcon.png'
import SelectSettingIcon from './assets/images/selectSettingIcon.png'

import PhotoIcon from './assets/images/photoColumNoSelect.png'
import SelctPhotoIcon from './assets/images/photoColumSelect.png'
// import Logo from './assets/images/Logo.png'

import './assets/css/spinner.css'
import './assets/css/base.css'
import Spinner from './assets/images/spinner.svg'
import {StyleSheet, css} from 'aphrodite-jss'
import { Indicator, MessageBox, Toast} from 'mint-ui'

import Logo from './assets/images/logo.png'

import ModifyPwClass from './modules/setting/modules/modifyPassword.js'
import Platform from '@/supports/platform'

const appStyles = StyleSheet.create({
  page: {
    'overflow': 'hidden',
    'height': '100%',
    '@global': {
      '.f5bg': {
        'background-color': '#f5f5f5'
      },
      '.navs': {
        'position': 'fixed',
        'bottom': 0,
        'width': '100%'
      },

      '.mu-buttom-item': {
        'min-width': '0'
      },
      '.mu-appbar-title': {
        'text-align': 'center',
        '& span': {
          'font-size': '16px'
        }
      },
      '.mu-appbar': {
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'width': '100%'
      },
      '.content-wrap': {
        'padding-top': '0px',
        'padding-bottom': '56px',
        'overflow': 'hidden',
        'position': 'relative',
        'height': '100%'
      },
      '.content': {
        'position': 'relative',
        'overflow': 'hidden',
        'height': '100%'
      },
      '.footer': {
        'position': 'absolute',
        'border-top': '1px solid #edeff2',
        'bottom': 0,
        'left': 0,
        'width': '100%'
      },
      '.navHeight': {
        'height': '56px'
      }
    }
  }
})

const loginStyles = StyleSheet.create({
  'page': {
    'position': 'relative',
    'background': '#dcd8d8',
    'height': '100%',
    '@global': {
      '.form': {
        'position': 'absolute',
        'z-index': 1,
        'background': '#FFFFFF',
        'max-width': '300px',
        'margin': 'auto',
        'height': '400px',
        'padding': '50px 30px',
        'border-radius': '5px',
        'text-align': 'center',
        'top': '600px',
        'left': 0,
        'right': 0,
        'bottom': 0,
        'display': 'flex',
        'flex-direction': 'column',
        'justify-content': 'space-around',
        '@global .logo': {
          'width': '80px',
          'height': '80px',
          'margin': '0 auto',
          'border-radius': '8px',
          'box-sizing': 'border-box',
          'overflow': 'hidden'
        },
        '@global .mu-text-field': {
          'text-align': 'left',
          'width': '100%'
        }
      }
    }
  }
})

@Component
class HomePage extends Vue {
  selected = '商品'
  isProductSelect = true

  isPhotosSelect = false

  isSettingSelect = false
  isMessageSelect = false

  handlerValueChange (value) {
    this.selected = value
    this.handlerChangeTabBarItemStatus()
    if (this.selected === '商品') {
      this.$router.push({name: 'productColumn', params: {update: true}})
    } else if (this.selected === '消息') {
      this.$router.push({name: 'messageColumn'})
    } else if (this.selected === '我的') {
      this.$router.push({name: 'setting'})
    } else if (this.selected === '图库') {
      this.$router.push({name: 'photos'})
    }
  }

  handlerChangeTabBarItemStatus () {
    this.isProductSelect = false

    this.isSettingSelect = false
    this.isPhotosSelect = false
    this.isMessageSelect = false
    if (this.selected === '商品') {
      this.isProductSelect = true
    } else if (this.selected === '消息') {
      this.isMessageSelect = true
    } else if (this.selected === '图库') {
      this.isPhotosSelect = true
    } else if (this.selected === '我的') {
      this.isSettingSelect = true
    }
  }

  render () {
    return (
     <div>
      <section class="content-wrap" style={this.$route.meta.fullscreen ? 'padding-bottom : 0px' : ''}>
        {this.$route.meta.keepAlive
          ? <keep-alive>
              <router-view></router-view>
          </keep-alive> : <router-view></router-view>}
      </section>

        <mt-tabbar fixed={true} style={this.$route.meta.fullscreen ? 'display:none' : ''} value={this.selected} onInput={value => this.handlerValueChange(value)}>

          <mt-tab-item id="商品">
            <img v-show={this.isProductSelect} slot="icon" src={SelectProductIcon}/>
            <img v-show={!this.isProductSelect} slot="icon" src={ProductIcon}/>
            商品
          </mt-tab-item>

          <mt-tab-item id="图库">
            <img v-show={this.isPhotosSelect} slot="icon" src={SelctPhotoIcon}/>
            <img v-show={!this.isPhotosSelect} slot="icon" src={PhotoIcon}/>
            图库
          </mt-tab-item>

          <mt-tab-item id="消息">
            <img v-show={this.isMessageSelect} slot="icon" src={SelectMessageIcon}/>
            <img v-show={!this.isMessageSelect} slot="icon" src={MessageIcon}/>
            消息
          </mt-tab-item>

          <mt-tab-item id="我的">
            <img v-show={this.isSettingSelect} slot="icon" src={SelectSettingIcon}/>
            <img v-show={!this.isSettingSelect} slot="icon" src={SettingIcon}/>
            设置
          </mt-tab-item>
        </mt-tabbar>
      </div>
    )
  }
}

@Component
class Loading extends Vue {
  renderContent () {
    return 'OFF时尚买手'.split('').map((text, index) => {
      let className = ''

      if (index > 0 && index < 6) {
        className = 'yoyo-x-' + (index % 6)
      }

      if (text.trim() === '') {
        className += ' blank'
      }
      return <span class={className}>{text}</span>
    })
  }

  render () {
    return (
      <div class="site-loading" id="site-loading">
        <img src={Spinner} />
        <div id="loading-text">{ this.renderContent() }</div>
      </div>
    )
  }
}

@Component
class Login extends Vue {
  user = {}
  error = ''

  syncValues (prop, value) {
    this.$set(this.user, prop, value)
  }

  handleUserInfo () {
    this.$axios.post('/user/v1/info', {token: this.user.token}).then(response => {
      if (response.status !== 0) {
        Toast('用户名或密码错误')
      } else {
        console.log(response.data)
        // Platform.saveValueForKey('123')
        this.$store.commit('setUser', response.data)
        this.$store.commit('setUid', response.data.uid)
        this.$router.push('/')
      }
    }).catch(e => {
      Toast('用户名或密码错误')
    })
  }

  handleChangePassword() {
    this.$store.commit('setModifyPw', '1')
  }

  handleUserLogin () {
    if (!this.user.username || !this.user.password) {
      return
    }

    this.$axios.post('/user/v1/login', {phone: this.user.username, password: this.user.password}).then(response => {
      if (response.status !== 0) {
        console.log(response)
        Toast('用户名或密码错误')
      } else {
        this.handleUserInfo()
        this.$store.commit('login', response.data)
      }
    }).catch(e => {
      Toast('用户名或密码错误')
    })
  }

  render () {
    return (
      <div class={css(loginStyles.page)}>
        <div class="form">
          <div class="logo">
            <img src={ Logo } />
          </div>

          <mt-field
            placeholder="用户名"
            value={this.user.username}
            onInput={value => { this.syncValues('username', value) }}
          />

          <mt-field
            placeholder="密码"
            type="password"
            value={this.user.password}
            onInput={value => { this.syncValues('password', value) }}
          />
          <p style='text-align:right;'><span onClick={this.handleChangePassword} style='padding:5px;color:#999;font-size:13px'>忘记密码</span></p>
          <mt-button onClick={this.handleUserLogin} type="danger">登录</mt-button>

        </div>
      </div>
    )
  }
}

@Component
export default class App extends Vue {
  loading = false
  verified = true
  created () {
    // this.verify()
    this.$store.dispatch('getAllDesigners')
  }

  async verify () {
    try {
      const response = await this.$axios.get('/api/verify')
      if (response.status === 0) {
        this.$store.commit('login', response.data)
      } else {
        this.$store.commit('logout')
      }
    } catch (e) {
      console.error(e)
      this.$store.commit('logout')
    } finally {
      setTimeout(() => {
        this.loading = false
      }, 2000)

      this.verified = true
    }
  }

  get authed () {
    return this.$store.state.token.length > 0
  }

  get forgive () {
    return this.$store.state.modifyPassword === '1'
  }

  render () {
    return this.authed ? <HomePage /> : this.forgive ? <ModifyPwClass/> : <Login />
  }
}
